<template>
  <view class="mine-page">
    <el-row :gutter="10">
      <el-col :span="12">
        <view class="simple-info card">
          <el-avatar :size="100" shape="square" :src="authInfo?.avatar_file?.url" />
          <view class="content">
            <el-descriptions :column="2" size="small">
              <template #title>
                <el-text type="primary">
                  <el-icon><User /></el-icon>
                  {{ authInfo.username }} {{ getNowTimeName(true) }}
                </el-text>
              </template>
              <template #extra>
                <el-button size="small" :icon="RefreshRight">刷新</el-button>
              </template>
              <el-descriptions-item label="昵称">{{ authInfo.nickname }}</el-descriptions-item>
              <el-descriptions-item label="身份">
                <el-tag v-for="(item, index) in authInfo.role" :key="item" :class="'sv-ml-gap-' + index" size="small">
                  {{ item }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="IP地址">{{ authInfo.last_login_ip }}</el-descriptions-item>
              <el-descriptions-item label="登录时间">{{ timeFormat(authInfo.last_login_date) }}</el-descriptions-item>
            </el-descriptions>
          </view>
        </view>
      </el-col>
      <el-col :span="12">
        <view class="message-info card"></view>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <view class="banner-info card"></view>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <view class="todo card"></view>
      </el-col>
      <el-col :span="8">
        <view class="calendar card"></view>
      </el-col>
      <el-col :span="8">
        <view class="timeline card"></view>
      </el-col>
    </el-row>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getNowTimeName, timeFormat } from '@/utils/util'
import { User, RefreshRight } from '@element-plus/icons-vue'

const authInfo = ref(uni.getStorageSync('sv-id-pages-userInfo'))
</script>

<style lang="scss">
.mine-page {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .simple-info {
    height: 120px;
    padding: 10px;
    display: flex;

    .content {
      flex-grow: 1;
      margin-left: 12px;
    }
  }

  .message-info {
    height: 120px;
  }

  .banner-info {
    height: 200px;
  }

  .todo,
  .calendar,
  .timeline {
    height: 525px;
  }
}

.el-row {
  margin-bottom: 10px;
}
</style>
